
<html>
	<head>
	<!DOCTYPE html >
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>MAGSI</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/sl-slide.css" />
	<link rel="stylesheet" href="css/font-awesome.css" />
	
	<script src="js/login/modernizr-2.6.2-respond-1.1.0.min.js"></script>	
	<link rel="shortcut icon" href="imagenes/ico/vaquita.ico">

   </head>
    
    <body>
    	<header class="navbar navbar-fixed-top">
    		 <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a id="logo" class="pull-left" href="index.php"></a>
                <div class="nav-collapse collapse pull-right">
                    <ul class="nav">                      
                        <li class="active"><a href="index.html">Inicio</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Operaciones de Usuario <i class="icon-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li class="login">  
                            <a data-toggle="modal" href="#loginForm"><i class="icon-lock">Login</i></a>
                        </li>
                        <li class="cerrar">  
                            <a data-toggle="modal" href="#cerrarForm"><i class="icon-lock">Cerrar Sesión</i></a>
                        </li>
                               <li><a href="#">Ayuda</a></li>
                            </ul>  
                        </li>
                                                                                    
                    </ul>        
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </header>
    
    
    <section class="title">
    <div class="container">
      <div class="row-fluid">
        <div class="span6">
          <h1>Bienvenidos</h1>
        </div>        
      </div>
    </div>
  </section>
    	
     <!--Slider-->
     <section id="slide-show">
     <div id="slider" class="sl-slider-wrapper">
        <!--Slider Items-->    
        <div class="sl-slider">
            <!--Slider Item1-->
            <div class="sl-slide item1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                <div class="sl-slide-inner">
                    <div class="container">
                        <img class="pull-right" src="imagenes/slider/img1.png" alt="" />                     
                    </div>
                </div>
            </div>
            <!--/Slider Item1-->

            <!--Slider Item2-->
            <div class="sl-slide item2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                <div class="sl-slide-inner">
                    <div class="container">
                        <img class="pull-right" src="imagenes/slider/img2.png" alt="" />
                       </div>
                </div>
            </div>
            <!--Slider Item2-->

            <!--Slider Item3-->
            <div class="sl-slide item3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                <div class="sl-slide-inner">
                   <div class="container">
                    <img class="pull-right" src="imagenes/slider/img3.png" alt="" />
                  </div>
            </div>
        </div>
        <!--Slider Item3-->

    </div>
    <!--/Slider Items-->

    <!--Slider Next Prev button-->
    <nav id="nav-arrows" class="nav-arrows">
        <span class="nav-arrow-prev"><i class="icon-angle-left"></i></span>
        <span class="nav-arrow-next"><i class="icon-angle-right"></i></span> 
    </nav>
    <!--/Slider Next Prev button-->

</div>
<!-- /slider-wrapper -->           
</section>
<!--/Slider-->



<section class="main-info">
    <div class="container">
        <div class="row-fluid">
            <div class="span9">
                <h4>Características</h4>
                <p class="no-margin" align="justify">Tristique senectus et netus et malesuada fames ac turpis egestas.
                	 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet</p>
            </div>
            
            <!--BOTON VERDE -->
            <!--<div class="span3">
                <a class="btn btn-success btn-large pull-right" href="http://shapebootstrap.net">Free Download Nova</a>
            </div>-->
        </div>
    </div>



<!--login -->
<div class="modal hide fade in" id="loginForm" aria-hidden="false">
    <div class="modal-header">
        <i class="icon-remove" data-dismiss="modal" aria-hidden="true"></i>
        <h4>Iniciar Sesión</h4>
    </div>
    <!--Modal Body-->
    <div class="modal-body" align="center">
        <form class="form-inline" action="index.php" method="post" id="form-login">
            <input type="text" class="input-small" placeholder="Usuario" name="Usuario">
            <input type="password" class="input-small" placeholder="Contraseña" name="password">
            <button type="submit" class="btn btn-primary" name="Iniciar">Inicia Sesión</button>
        </form>
        <a href="#">Olvidó la contraseña </a>
    </div>
    <!--/Modal Body-->
</div>
<!--  /Login form -->


<!--Cerrar Sesión -->
<div class="modal hide fade in" id="cerrarForm" aria-hidden="false">
    <div class="modal-header">
        <i class="icon-remove" data-dismiss="modal" aria-hidden="true"></i>
        <h4>Cerrar Sesión</h4>        
    </div>
    <!--Modal Body-->
    <div class="modal-body" align="center">
        <form class="form-inline" action="index.php" method="post" id="form-login">
            <h5>Desea cerrar la sesión</h5> <br />           
            <button type="submit" class="btn btn-primary" name="Cerrar">Cerrar Sesión</button>
        </form>       
    </div>
    <!--/Modal Body-->
</div>
<!--  /Cerrar Login-->


<script src="js/login/jquery-1.9.1.min.js"></script>
<script src="js/login/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!--script para el login  -->

<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<!--script para el slider  -->

<footer id="footer">
    <div class="container">
        <div class="row-fluid" >
            <div class="span5 cp">
                &copy; 2014 <a target="_blank" href="http://www.mag.go.cr/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">Ministerio Agricultura y Ganadería</a>. Todos los Derechos Reservados.
            </div>
            <div class="span1" align="right">
                <a id="gototop" class="gototop pull-right" href="#"><i class="icon-angle-up"></i></a>
            </div>
            <!--/Goto Top-->
        </div>
    </div>
</footer>

<!--Funciones de Slider-->
<script type="text/javascript">
	$(function() {
    var Page = (function() {

        var $navArrows = $( '#nav-arrows' ),
        slitslider = $( '#slider' ).slitslider( {
            autoplay : true
        } ),

        init = function() {
            initEvents();
        },
        initEvents = function() {
            $navArrows.children( ':last' ).on( 'click', function() {
                slitslider.next();
                return false;
            });

            $navArrows.children( ':first' ).on( 'click', function() {
                slitslider.previous();
                return false;
            });
        };

        return { init : init };

    })();

    Page.init();
});
	
</script>
    	
    </body>
    	
</html>